<template>
	<!-- 每一条评论 -->
	<div class="coment-item">
		<div class="base-info">
			<!-- 头像 -->
			<div class="avatar" @click="toUserDetail(item.user.userId)">
				<img :src="item.user.avatarUrl" alt="" />
			</div>
			<!-- 右侧内容 -->
			<div class="right-info">
				<!-- 评论 -->
				<div class="content">
					<span @click="toUserDetail(item.user.userId)">{{ item.user.nickname }}:</span>
					{{ item.content }}
				</div>
				<!-- 被回复的评论 -->
				<div class="be-replied" v-if="item.beReplied != null && item.beReplied.length != 0">
					<div v-for="(item2, index2) in item.beReplied" :key="index2">
						<span @click="toUserDetail(item2.user.userId)">@{{ item2.user.nickname }}:</span>{{ item2.content }}
					</div>
				</div>
				<!-- 评论时间 -->
				<div class="coment-time">
					{{ showDate(item.time) }}
				</div>
			</div>
		</div>
		<!-- 点赞 回复评论 -->
		<div class="like">
			<span class="iconfont icon-dianzan" :class="{ isLike: item.liked }" @click="isLikeCommentBy(item)">{{  formatNum(item.likedCount) }}</span>
			<span class="iconfont icon-comment" @click="replyComment(item)"></span>
		</div>
	</div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue';
import { useRouter } from 'vue-router';
import { isLikeComment } from "@/network/comment/comment";
import { formatDate } from "@/common/formatDate";


const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  commentType: {
    type: Number,
  },
  commentresId: {
    type: [Number, String],
  },
});

// 定义 emits
const emit = defineEmits(['toUserDetail', 'getReplyComment']);

// 获取 router 实例
const router = useRouter();

// 格式化日期
const showDate = computed(() => {
  return (value) => {
    const date = new Date(value);
    return formatDate(date, "yyyy-MM-dd   hh:mm:ss");
  };
});

// 格式化数字
const formatNum = (num) => {
  return num >= 1000 ? `${(num / 1000).toFixed(1)}k` : num;
};

// 方法：点击用户头像
const toUserDetail = (uid) => {
  router.push(`/userdetail/${uid}`);
  emit("toUserDetail");
};

// 方法：点击回复评论
const replyComment = (item) => {
  const replyInfo = {
    commentId: item.commentId,
    uname: item.user.nickname,
  };
  emit("getReplyComment", replyInfo);
};

// 方法：点赞评论
const isLikeCommentBy = (item) => {
  // 先判断登录状态
  if (!props.$store.state.isLogin) {
    props.$message({
      type: "warning",
      message: "登录后才能点赞",
      showClose: true,
      center: true,
    });
    return;
  }
  const t = item.liked ? 0 : 1;
  // 发送网络请求
  isLikeComment(props.commentresId, props.commentType, t, item.commentId)
    .then((res) => {
      if (res.data.code === 200) {
        if (t === 0) {
          props.$message({
            type: "success",
            message: "已取消点赞",
            center: true,
          });
          item.likedCount -= 1;
          item.liked = !item.liked;
        } else {
          props.$message({
            type: "success",
            message: "点赞成功",
            center: true,
          });
          item.likedCount += 1;
          item.liked = !item.liked;
        }
      } else {
        props.$message.error("点赞失败,请稍后重试!");
      }
    })
    .catch(() => {
      props.$message.error("点赞失败,请稍后重试!");
    });
};
</script>

<style lang="less" scoped>
.coment-item {
	border-bottom: 1px solid #eee;
	padding: 15px 0;
	.base-info {
		display: flex;
		justify-content: left;
		.avatar {
			width: 6%;
			img {
				width: 100%;
				border-radius: 50%;
			}
		}
		.right-info {
			width: 94%;
			padding-left: 15px;
			.content {
				padding-top: 10px;
				span {
					cursor: pointer;
					color: #5091ca;
				}
			}
			.be-replied {
				margin: 15px 0;
				padding: 20px 10px;
				background: #eee;
				span {
					cursor: pointer;
					color: #5091ca;
				}
			}
			.coment-time {
				padding-top: 10px;
			}
		}
	}
	.like {
		text-align: right;
		padding-right: 20px;
		span {
			padding-right: 15px;
			cursor: pointer;
			&:hover {
				font-weight: 700;
			}
		}
	}
}
.isLike {
	color: var(--themeColor);
}
</style>
